<template>
  <div class="order-cont-wrap">
    <div class="search">
      <input
        type="text"
        v-model="searchVal"
        placeholder="请输入座位号进行搜索"
      />
    </div>
    <div
      class="rentOrder"
      v-infinite-scroll="load"
      :infinite-scroll-disabled="busy"
      infinite-scroll-distance="10"
    >
      <template v-if="list && Array.isArray(list) && list.length">
        <div class="order-item" v-for="(it, ind) in list" :key="ind">
          <div class="top-info">
            <div class="item-name">座位号:{{ it.numName }}</div>
            <div class="item-info">
              <span class="count total-count">计费规则:{{ it.ruleName }}</span>
            </div>
          </div>
          <div class="rent-desk">
            <div class="desk-item-info">
              <span class="name">设备名:</span>
              <span class="val">{{ it.productName }}</span>
            </div>
            <div class="desk-item-info">
              <span class="name">开始时间:</span>
              <span class="val">{{
                new Date(it.addTime).Format("M/d hh:mm")
              }}</span>
            </div>
            <div class="desk-item-info">
              <span class="name">状态:</span>
              <span class="val">租赁中</span>
            </div>
            <div class="desk-item-info">
              <span class="name">使用时长:</span>
              <span class="val">{{ spanTime(it.addTime, new Date()) }}</span>
            </div>
            <div class="desk-item-info">
              <span class="name">押金金额:</span>
              <span class="val">{{ Number(it.totalAmount).toFixed(2) }}</span>
            </div>
            <div class="desk-item-info">
              <span class="name">租赁费用:</span>
              <span class="val">{{ Number(it.payAmount).toFixed(2) }}</span>
            </div>
            <div class="desk-item-info">
              <span class="name">应收金额:</span>
              <span class="val">{{ Number(it.getAmount).toFixed(2) }}</span>
            </div>
            <div class="desk-item-info">
              <span class="name">退还押金:</span>
              <span class="val">{{ Number(it.refundAmount).toFixed(2) }}</span>
            </div>
            <div class="desk-item-info">
              <span class="name">来源:</span>
              <span class="val">{{ sourceType[it.source] }}</span>
            </div>
            <div class="desk-item-info">
              <span class="name">操作人:</span>
              <span class="val">{{ it.empName ? it.empName : "" }}</span>
            </div>
          </div>
          <!--  -->
          <div class="modify-btn">
            <span @click.stop="doShowReturnRent(it)">归还</span>
          </div>
          <!--  -->
        </div>
        <div class="mask" v-if="showReturnRent" @click.stop="clearInfo">
          <div class="return" @click.stop="">
            <div class="item-info">
              <span class="tit">当前所选机位为</span>
              <div class="device-name">{{ nowSelItem.numName }}</div>
              <div class="site">
                使用设备:<b>{{ nowSelItem.productName }}</b>
              </div>
            </div>
            <div class="modify-item" @click.stop="returnDevice">归还该设备</div>
          </div>
        </div>
      </template>
      <template v-else>
        <div style="font-size: 0.32rem; text-align: center">暂无数据...</div>
      </template>
      <div class="refresh">
        <span @click.stop="refresh">刷新</span>
      </div>
    </div>
  </div>
</template>
<script>
import { API_BASE_URL } from "@/urlConfig/index";

export default {
  name: "rentOrder",
  data() {
    return {
      searchVal:"",
      sourceType: {
        POS: "收银台",
        WEB: "电脑点单",
        EMPLOYEE: "店员宝",
        WEIXIN: "微信点单",
        CONSUMER: "消费者，微信",
        TAKEOUT: "三方外卖",
      },
      storeId: "",
      list: [],
      timer: null,
      leaseProductEnabled: "",
      nowSelItem: null,
      showReturnRent: false,
      page: 0,
      size: 10,
      busy: false,
    };
  },
  watch: {
    searchVal(val) {
      this.page = 0;
      this.busy = false;
      this.list = [];
      this.getData();
    },
  },
  methods: {
    spanTime(start, end) {
      if (start && end) {
        let spanTime = new Date(end).getTime() - new Date(start).getTime();
        let hour = 60 * 1000 * 60;
        let min = 60 * 1000;
        let sec = 1000;
        let hours = Math.floor(spanTime / hour);
        let mins = Math.ceil((spanTime % hour) / min);
        if (hours < 0) {
          return `0小时0分`;
        }
        return `${hours}小时${mins}分`;
      } else {
        return "-";
      }
    },
    doShowReturnRent(item) {
      this.nowSelItem = item;
      this.showReturnRent = true;
    },
    clearInfo() {
      this.showReturnRent = false;
      this.nowSelItem = null;
    },
    returnDevice() {
      if (!this.nowSelItem) {
        return;
      }
      let phone = "";
      try {
        phone = localStorage.getItem("phone");
      } catch (error) {}
      this.$http({
        url: `${API_BASE_URL}v1/call/create/lease/order/refund`,
        method: "POST",
        data: {
          id: this.nowSelItem.id,
          returnEmpName: phone ? phone : undefined,
          refundHandEnabled:false,
        },
      })
        .then((res) => {
          this.$message({
            message: "归还成功！",
            customClass: "success",
          });
          this.clearInfo();
          this.page = 0;
          this.list = [];
          this.getData();
        })
        .catch((err) => {});
    },
    sortNum(nums) {
      if (nums && Array.isArray(nums) && nums.length) {
        let tempNums = JSON.parse(JSON.stringify(nums));
        return tempNums.sort((a, b) => Number(a) - Number(b));
      } else {
        return "-";
      }
    },
    load() {
      if (this.busy) return;
      this.busy = true;
      this.page++;
      this.getData();
    },
    refresh() {
      this.page = 0;
      this.busy = false;
      this.list = [];
      this.getData();
    },
    getData() {
      this.$http({
        url: `${API_BASE_URL}v1/call/lease/order/list`,
        method: "POST",
        data: {
          storeId: this.storeId,
          status: "FINISHED",
          page: this.page,
          size: this.size,
          numName: this.searchVal,
        },
      }).then((res) => {
        this.busy = false;
        if (res.data && Array.isArray(res.data.data)) {
          this.list = [...this.list, ...res.data.data];
        }
      });
    },
  },
  mounted() {
    try {
      let leaseProductEnabled = localStorage.getItem("leaseProductEnabled");
      this.leaseProductEnabled = leaseProductEnabled;
    } catch (error) {}
    try {
      this.storeId = localStorage.getItem("storeId");
    } catch (error) {}
    this.getData();
    // this.timer = setInterval(() => {
    //   this.getData();
    // }, 1000 * 60);
  },
  destroyed() {
    if (this.timer) {
      clearInterval(this.timer);
    }
  },
};
</script>
<style lang="scss" scoped>
.order-cont-wrap {
  width: 100%;
  height: 100%;
  overflow: hidden;
  .search {
    width: 100%;
    box-sizing: border-box;
    padding: 0.2rem 0.3rem;
    background-color: #f4f4f4;
    input {
      width: 100%;
      height: 0.8rem;
      border-radius: 0.5rem;
      text-align: center;
      background-color: transparent;
      border: 1px solid #ce4602;
    }
  }
}
.rentOrder {
  font-size: 0.32rem;
  width: 100%;
  height: calc(100% - 1.759rem);
  background-color: #f4f4f4;
  overflow: hidden;
  overflow-y: auto;
  box-sizing: border-box;
  padding: 0.24rem;
  .order-item {
    box-sizing: border-box;
    background-color: #fff;
    margin-bottom: 0.48rem;
    border-radius: 0.259rem;
    box-shadow: 0px 0px 2px 2px rgba(220, 96, 96, 0.31);
    .top-info {
      /* background-color: #12a9197d; */
      padding: 0.24rem;
      padding-bottom: 0;
      border-bottom: 1px solid #ddd;
      /* color: #fff; */
    }
    .rent-desk {
      padding: 0.24rem;
    }
    .item-name {
      font-size: 0.36rem;
      font-weight: bold;
      padding-bottom: 0.24rem;
    }
    .item-info {
      font-size: 0.28rem;
      padding-bottom: 0.24rem;
      .count {
        padding-right: 0.24rem;
        font-size: 0.28rem;
        &.total-count {
          color: #025ece;
        }
        &.res-count {
          color: #ce4602;
        }
        &.rent-count {
          color: #08a52c;
        }
      }
    }
    .rent-desk {
      padding-top: 0.24rem;
      white-space: wrap;
      word-break: break-all;
      display: flex;
      flex-wrap: wrap;
      .desk-item-info {
        width: 50%;
        font-size: 0.24rem;
        padding-bottom: 0.24rem;
        .name {
          color: #999;
        }
        .val {
          color: #333;
        }
      }
      .desk-item {
        width: 20%;
        display: flex;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
        padding: 0.12rem;
        .desk-item-inner {
          width: 0.8rem;
          height: 0.8rem;
          border-radius: 0.4rem;
          background-color: #efefef;
          display: flex;
          justify-content: center;
          align-items: center;
          color: #408a00;
        }
      }
    }
    .modify-btn {
      display: flex;
      justify-content: center;
      padding-bottom: 0.24rem;
      span {
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        width: 50%;
        height: 0.598rem;
        background-color: #e66a6a;
        border-radius: 0.1rem;
        font-size: 0.28rem;
      }
    }
  }
}
.mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9;
  .return {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #fff;
    box-sizing: border-box;
    padding: 0.5rem 0.24rem;
    .item-info {
      text-align: center;
      .tit {
        display: inline-block;
        font-size: 0.3rem;
        padding-bottom: 0.24rem;
        color: #666;
      }
      .device-name {
        font-size: 0.32rem;
        font-weight: bold;
      }
      .site {
        padding-top: 0.24rem;
        padding-bottom: 0.96rem;
        font-size: 0.28rem;
        color: #ce4602;
      }
    }
    .modify-item {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 1rem;
      width: 100%;
      border-radius: 0.1rem;
      background-color: #ce4602;
      color: #fff;
      font-size: 0.3rem;
    }
  }
}
.refresh {
  position: fixed;
  bottom: 0.5rem;
  right: 0.5rem;
  z-index: 8;
  span {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 1rem;
    height: 1rem;
    border-radius: 0.5rem;
    background-color: #ccc;
    color: #333;
    font-size: 0.28rem;
  }
}
</style>